<template>
	<view class="page">
		<view class="bar_info" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class="title_bar">
				<view class="title_bar_left"></view>
				<view class="title_bar_center">
					注册
				</view>
				<view class="title_bar_right"></view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		
		<view class="login_view">
			<view class="login_tips">
				<text>用户您好~</text></br>
				<text>欢迎使用爱尚积分</text>
			</view>
			<view class="login_input">
				<view class="login_input_item margin-42">
					<u-input v-model="name" placeholder="请输入姓名" height="100" placeholder-style="font-size: 26rpx;color: #999;" :maxlength="10" type="text" />
				</view>
				<view class="login_input_item margin-42">
					<u-input v-model="mobile" placeholder="请输入手机号" height="100" placeholder-style="font-size: 26rpx;color: #999;" :maxlength="11" type="number" />
				</view>
				<view class="login_input_item">
					<u-input v-model="inviteCode" placeholder="请输入邀请码" height="100" placeholder-style="font-size: 26rpx;color: #999;" type="text" />
				</view>
			</view>
			<view class="login-btn">
				<u-button :custom-style="customStyle" :hair-line="false" :ripple="true" ripple-bg-color="rgba(2, 120, 252, 0.3)" @click="registerBtn">注册</u-button>
			</view>
			<view class="login_text">
				<text class="login_text_1">已有用户，</text>
				<text class="login_text_2" @tap.stop="handleLogin">立即登录</text>
			</view>
		</view>
		<view class="login_agree">
			<image v-if="is_check" src="./static/3.png" mode="" @tap.stop="is_check=false"></image>
			<image v-else src="./static/2.png" mode="" @tap.stop="is_check=true"></image>
			<text>请阅读并同意</text>
			<text class="login_agree_text" @tap.stop="handleAgreement(1)">《隐私政策》</text>
			<text>和</text>
			<text class="login_agree_text" @tap.stop="handleAgreement(2)">《用户协议》</text>
		</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		data() {
			return {
				name: "",
				mobile: "",
				inviteCode: "",
				customStyle: {
					backgroundColor: '#BDD9FD',
					borderRadius: '20rpx',
					borderColor: '#BDD9FD',
					width: '610rpx',
					height: '100rpx',
					color: '#fff',
					fontSize: '32rpx',
				},
				is_check: false,
				scene: "",  // 邀请码
			}
		},
		onLoad(query) {
			console.log(query.scene);
			if (query.scene) {
				var scene = decodeURIComponent(query.scene);
				var index = scene.lastIndexOf("=");
				this.inviteCode = scene.substring(index+1, scene.length);
			}
		},
		methods: {
			registerBtn() {
				if (!this.name) {
					this.$message.info('请输入姓名');
					return false;
				}
				if (!validate(this.mobile, 'require')) {
					this.$message.info('手机号不能为空');
					return false;
				}
				if (!validate(this.mobile, 'phone')) {
					this.$message.info('请输入正确的手机号');
					return false;
				}
				if (!this.is_check) {
					this.$message.info('请阅读并同意隐私政策和用户协议');
					return false;
				}
				this.$api.post(global.apiUrls.postRegister, {
					nickname: this.name,
					mobile: this.mobile,
					invite_code: this.inviteCode
				}).then(res => {
					// console.log(res);
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						this.$store.commit('updateUserInfo', res.data.data);
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tabbar/index'
							})
						}, 800)
					}
				})
			},
			handleLogin() {
				uni.redirectTo({
					url: '/pages/login/login'
				})
				
			},
			handleAgreement(type) {
				uni.navigateTo({
					url: '/pages/login/agreement?type=' + type
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: url('https://asjf.yunyakeji.cn/uploads/mini/1.png') no-repeat;
		background-size: 100% 100% !important;
		height: 100vh;
		.bar_info {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			// border-bottom: 1px solid #eee;
			// background: #fff;
			z-index: 10;
			position: fixed;
			top: 0rpx;
		
			.title_bar {
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;
		
				.title_bar_left {}
		
				.title_bar_center {
					line-height: 88rpx;
					font-size: 36rpx;
					font-weight: 400;
				}
		
				.title_bar_right {}
			}
		}
		.login_view {
			padding: 0 70rpx;
			margin-top: 130rpx;
			.login_tips {
				font-size: 42rpx;
				font-weight: 400;
				line-height: 72rpx;
				margin-bottom: 107rpx;
			}
			.login_input {
				.login_input_item {
					height: 100rpx;
					width: 100%;
					background: #fff;
					border-radius: 20rpx;
					font-size: 26rpx;
				}
				.margin-42 {
					margin-bottom: 42rpx;
				}
				/deep/.u-input {
					padding: 0 36rpx !important;
				}
			}
			.login-btn {
				width: 610rpx;
				height: 100rpx;
				margin: 78rpx 0 58rpx;
			}
			.login_text {
				font-size: 26rpx;
				text-align: center;
				.login_text_1 {
					color: #CCCCCC;
				}
				.login_text_2 {
					color: #0278FC;
				}
			}
		}
		.login_agree {
			width: 100%;
			position: fixed;
			bottom: 105rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: center;
			image {
				width: 26rpx;
				height: 26rpx;
				margin-right: 12rpx;
				transform: translateY(6rpx);
			}
			.login_agree_text {
				color: #0278FC;
			}
		}
	}
</style>